<template>
  <div class="main">
    <!-- <div class="set-wrapper"> -->
    <headerBack>
      <b class="my-right" slot="my-right" @click="saveInfo">保存</b>
    </headerBack>
    <scrollerEdit lock-x>
      <div class="settingWrap">
        <div class="settingBox" v-show="showList">
          <div class="setes flex-h">
            <b class="b1">头像</b>
            <span class="flex1 sp1">
              <img v-if="userType != 3" :src="usersData.avatar ? usersData.avatar : morenImg" alt />
              <img v-else :src="teaInfoData.headImg ? teaInfoData.headImg : morenImg" alt />
            </span>
          </div>
          <div v-if="userType != 3" class="setes flex-h">
            <b class="b3">昵称</b>
            <input class="flex1 sp3 inputName" type="text" v-model="nickName" placeholder="请填写您的昵称" />
          </div>
          <div class="setes flex-h">
            <b class="b3">姓名</b>
            <input v-on:blur="blurAdjust" class="flex1 sp3 inputName" type="text" v-model="userName" placeholder="请填写您的姓名" />
          </div>
          <div class="setes flex-h" @click="showSexPopup = true">
            <b class="b3">性别</b>
            <span v-show="!sexes" class="flex1 sp3">请选择性别</span>
            <span v-show="sexes" class="flex1 sp3">{{ sexes }}</span>

            <i class="imgs-right"></i>
          </div>
          <div class="setes flex-h" @click="showAreaPopup = true">
            <b class="b3">城市</b>
            <span v-show="!provinceAndCity" class="flex1 sp3">请选择省、市、区</span>
            <span v-show="provinceAndCity" class="flex1 sp3">{{ provinceAndCity }}</span>
            <i class="imgs-right"></i>
          </div>
          <div class="setes flex-h" @click="handleChoSchool">
            <b class="b3">学校</b>
            <span v-show="!schoolName" class="flex1 sp3">请选择所就读的学校</span>
            <span v-show="schoolName" class="flex1 sp3">{{ schoolName }}</span>
            <i class="imgs-right"></i>
          </div>
          <div class="setes flex-h" @click="showClassPopup = true">
            <b class="b3">年级</b>
            <span v-show="!ageClass" class="flex1 sp3">请选择所在班级</span>
            <span v-show="ageClass" class="flex1 sp3">{{ ageClass }}</span>
            <i class="imgs-right"></i>
          </div>
        </div>
      </div>
    </scrollerEdit>

    <popup-picker :show.sync="showSexPopup" :data="sexList" v-model="value1" class="popiker" @on-change="changesSex" @on-hide="onHideSex"></popup-picker>
    <popup-picker :show.sync="showClassPopup" :data="classNameList" v-model="value8" class="popiker" @on-change="changesclassName" @on-hide="onHideclassName"></popup-picker>
    <popup-picker :show.sync="showAreaPopup" @on-change="changesRegion" @on-hide="onHideRegion" class="popiker" :data="regionList" :columns="3" v-model="value4" show-name></popup-picker>
    <popup-picker :show.sync="showSchoolPopup" @on-change="changesSchool" @on-hide="onHideSchool" class="popiker" :data="schoolList" :columns="3" v-model="value5" show-name></popup-picker>
  </div>
  <!-- </div> -->
</template>
<script>
import { myPersonalInfo, modifyPersonalInfo, getCascadeArea, getSchoolsById } from '~/api/identity'
import headerBack from '~/components/headerBack'
import ls from 'store2'
import { TransferDom, PopupPicker } from 'vux'
import scrollerEdit from '~/components/scrollerEdit'

export default {
  head: {
    title: '升学在线',
  },
  directives: {
    TransferDom,
  },
  components: {
    PopupPicker,
    scrollerEdit,
    headerBack,
  },
  created() {
    this.userType = ls.get('yxkData').userType
  },
  data() {
    return {
      nickName: '',
      userName: '',
      sexes: '',
      sexList: [['男', '女']],
      showSexPopup: false,
      value1: [],

      schoolList: [],
      value5: [],
      showSchoolPopup: false,
      showAreaPopup: false,
      provice: [],
      citys: [],
      county: [],
      provinceAndCity: '',
      schoolName: '',
      regionList: [],
      value4: [],

      showList: false,
      sendObj: {},
      showsGrade: false,
      ageClass: '',
      showClassPopup: false,
      classNameList: [['高一', '高二', '高三'], []],
      value8: [],
      usersData: [],
      morenImg: require('~/static/usermoren.png'),
      userType: null,
      teaInfoData: [],
      teaName: '',
    }
  },
  watch: {},
  mounted: function() {
    this.$visit('MyInfo')
    this.createClassNames()
    this.getCascadeArea()
    this.getInfo()
  },
  methods: {
    blurAdjust(e) {
      window.scroll(0, 0)
    },
    handleChoSchool() {
      if (this.areaid) {
        this.showSchoolPopup = true
      } else {
        this.$vux.toast.text('请先选择省份！')
      }
    },
    changesSex(e) {
      this.sexes = e[0]
      e[0] == '男' ? (this.sendObj.sex = 1) : e[0] == '女' ? (this.sendObj.sex = 2) : (this.sendObj.sex = 0)
    },
    onHideSex(type) {
      if (type) {
        this.sexes = this.sexes
      }
    },
    getAreaSchool() {
      getSchoolsById(this.areaid)
        .then((res) => {
          let school = res.data
          school.forEach((item) => {
            this.schoolList.push({
              name: item.schoolName,
              value: item.schoolId + '&' + item.schoolName,
            })
          })
          this.showsSchool = true
        })
        .catch(() => {})
    },
    changesSchool(e) {
      this.schoolid = parseInt(e[0])
      this.schoolName = e[0].split('&')[1]
      // 给发送的数据赋值
      this.sendObj.schoolId = this.schoolid
    },
    onHideSchool(type) {
      if (type) {
        this.schoolName = this.schoolName
        this.showsGrade = true
        this.createClassNames()
      }
    },
    changesRegion(e) {
      this.provinceAndCity = this.provice[parseInt(e[0])].lable + this.citys[parseInt(e[1])].lable + e[2].split('&')[1]
      this.povName = this.provice[parseInt(e[0])].lable
      this.areaid = parseInt(e[2])
      this.provinceid = this.provice[parseInt(e[0])].id
      this.cityid = this.citys[parseInt(e[1])].id
      //   // 给发送的数据赋值
      // this.sendObj.provinceid = this.provinceid;
      // this.sendObj.cityid = this.cityid;
      this.sendObj.areaId = this.areaid
    },
    onHideRegion(type) {
      if (type) {
        this.areaid = this.areaid
        this.schoolList = []
        this.schoolName = ''
        this.getAreaSchool()
      }
    },
    getCascadeArea() {
      this.$loading('open')
      getCascadeArea()
        .then((res) => {
          let areaData = res.data
          let arrArea = []
          let arrCity = []
          let ary = []
          let are = []
          areaData.forEach((item, index) => {
            arrArea.push({
              name: item.lable,
              value: index + 'ew',
              parent: 0,
            })
            this.provice.push(item)
            arrCity.push(item.list)
          })
          arrCity.forEach((its, index) => {
            its.forEach((i, $index) => {
              ary.push(i.list)
              are.push({
                name: i.lable,
                parent: index + 'ew',
              })
              this.citys.push(i)
            })
          })
          are.forEach((items, index) => {
            arrArea.push({
              name: items.name,
              value: index + 'es',
              parent: items.parent,
            })
          })
          ary.forEach((itt, index) => {
            itt.forEach((its, indexs) => {
              arrArea.push({
                name: its.lable,
                value: its.id + '&' + its.lable,
                parent: index + 'es',
              })

              this.county.push(its)
            })
          })

          this.regionList = arrArea
          this.$hideLoading()
        })
        .catch(() => {
          this.$hideLoading()
          this.$vux.toast.text('省份数据加载失败，请稍后再试')
        })
    },
    saveInfo() {
      this.modifyPersonalInfo()
    },
    modifyPersonalInfo() {
      this.$loading('open')
      this.sendObj.nickName = this.nickName
      this.sendObj.name = this.userName
      modifyPersonalInfo(this.sendObj)
        .then((res) => {
          if (res.code == '0') {
            ls.set('userArea', this.povName)
            this.$vux.toast.text('信息绑定成功')
          }
          this.$visit('MyInfo', '', 'SaveInfo')
          this.$hideLoading()
          this.$vux.toast.text(res.message)
        })
        .catch(() => {
          this.$hideLoading()
        })
    },
    createClassNames() {
      let singleClassNameList = []
      for (let i = 1; i < 101; i++) {
        singleClassNameList.push(i + '班')
      }
      this.classNameList[1] = singleClassNameList
    },
    onHideclassName(type) {
      if (type) {
        this.ageClass = this.ageClass
        // this.showBtn = true;
      }
    },
    changesclassName(e) {
      this.classNames = e[1]
      this.sendObj.className = this.classNames
      if (e[0] == '高一') {
        this.gradeid = 1
      } else if (e[0] == '高二') {
        this.gradeid = 2
      } else {
        this.gradeid = 3
      }
      this.ageClass = e[0] + e[1]
      // 给发送的数据赋值
      this.sendObj.gradeId = this.gradeid
    },
    getInfo() {
      this.$loading('open')
      myPersonalInfo()
        .then((res) => {
          if (res.code == 0) {
            this.usersData = res.data
            if (res.data.gradeId && res.data.className) {
              let grade
              res.data.gradeId == 1 ? (grade = '一') : res.data.gradeId == 2 ? (grade = '二') : (grade = '三')
              this.ageClass = '高' + grade + res.data.className
            }
            this.sendObj.schoolId = this.schoolid
            this.sendObj.areaId = this.areaid
            this.schoolName = res.data.title
            this.provinceAndCity = res.data.labels
            this.sexes = res.data.sex
            res.data.sex == 1 ? (this.sexes = '男') : res.data.sex == 2 ? (this.sexes = '女') : (this.sexes = '')
            this.nickName = res.data.nickName
            this.userName = res.data.name
            this.showList = true
          }
          this.$hideLoading()
        })
        .catch(() => {
          this.$hideLoading()
          this.$vux.toast.text('登录失败，请重新登录')
        })
    },
  },
  beforeDestroy() {},
}
</script>

<style scoped lang="less">
.set-wrapper {
  background: #fff;
}
.settingWrap {
  width: 7.5rem;
  min-height: 100vh;
  height: auto;
  background: #fff;
  .settingBox {
    width: 100%;
    padding: 0 0.3rem;
    box-sizing: border-box;
    .setes {
      width: 100%;
      height: auto;
      padding: 0.2rem 0;
      box-sizing: border-box;
      border-bottom: 0.01rem solid rgba(229, 232, 237, 1);
      align-items: stretch;
      .inputName {
        outline: none;
        border: none;
      }
      b {
        font-size: 0.28rem;
        font-family: 'PingFangSC-Regular';
        font-weight: 400;
        color: rgba(34, 34, 34, 1);
      }
      .b1 {
        height: 0.8rem;
        line-height: 0.8rem;
      }
      .sp1 {
        height: 0.8rem;
        text-align: right;
        img {
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 50%;
        }
      }
      .sp2 {
        padding-left: 0.3rem;
        box-sizing: border-box;
        input {
          text-align: right;
          width: 100%;
          height: 0.8rem;
          font-size: 0.28rem;
          font-family: 'PingFangSC-Regular';
          font-weight: 400;
          color: rgba(34, 34, 34, 1);
        }
      }
      .sp3 {
        padding-left: 0.3rem;
        box-sizing: border-box;
        height: 0.8rem;
        text-align: right;
        font-size: 0.26rem;
        line-height: 0.8rem;
        font-family: 'HelveticaNeue';
        color: rgba(34, 34, 34, 1);
      }
      .b3 {
        height: 0.8rem;
        line-height: 0.8rem;
      }
      .imgs-right {
        line-height: 0.8rem;
        margin-top: 0.2rem;
        margin-left: 0.2rem;
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -1.3rem;
        background-size: 3rem 2.4rem;
      }
    }
  }
}
.my-right {
  width: 100%;
  display: block;
  height: 0.4rem;
  line-height: 0.4rem;
}
</style>
